/* 
    Document   : paint
    Created on : 9 mars 2012, 09:50:33
    Author     : asus
    Description:
        Purpose of the stylesheet follows.
*/

body{
    margin: 0px 0px 0px 0px;
    background-color:#eaeaea;
    height:640px;
/*    opacity: 0.3;*/
}

.bodyNonOpac{
/*nulle*/
}

.bodyOpac{
    background-color:#eaeaea;
    opacity: 0.3;
}

#content {
    font:14px calibri,arial,verdana,sans-serif;
    width:1100px;
    height:540px;
    margin:auto;
    /*        rajouter pour traiter les petits ecrans (evite de coler menu contre bord)*/
    padding-left: 15px;
    padding-right: 15px;
    -moz-border-radius:8px;
   -webkit-border-radius:8px;        
   border-radius:8px;
    
    /*        arriere plan*/

}


root { 
    display: block;
}

/*fieldset {

}*/

#options{
    width:330px;
    height: 210px;
    float: left;

    box-shadow: 1px 1px 6px #555;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;	
    border-radius:8px;
    background-color:#c4c4c4;
    /*    height:640px;*/
    /*    margin:auto;*/
    /*        rajouter pour traiter les petits ecrans (evite de coller menu contre bord)*/
    padding: 15px;
    -moz-border-radius:8px;
   -webkit-border-radius:8px;        
   border-radius:8px;

    /*        arriere plan*/
    /*    background-color:white;*/
}

#text-input{
    -moz-border-radius:8px;
    -webkit-border-radius:8px;	
    border-radius:8px;
    width: 295px;
}

#send-button{
    float: right;
}

footerChat{
    float: right;
    text-align: right;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px; 
}


#messages{
    -moz-border-radius:8px;
    -webkit-border-radius:8px;	
    border-radius:8px;
    width:335px;
    height:237px;
    overflow:auto;
    margin: 5px 5px 5px 5px;
    background-color:white;
    padding: 5px;
}

#chat{
    width:355px;
    height:287px;
    box-shadow: 1px 1px 6px #555;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;	
    border-radius:8px;
    float:left;
    /*            border: 1px solid black;*/

    /*            rajouter pour traiter les petits ecrans (evite de coler menu contre bord)*/
    margin-top: 20px;
    padding-top: 2px;
    padding-left: 2px;
    padding-right: 2px; 
    background-color:#c4c4c4;
}

#container{
    position: relative;
    width: 700px;
    height: 550px;
       
    float: right;
    box-shadow: 1px 1px 6px #555;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;	
    border-radius:8px;

    background-color:white;
    cursor: crosshair;
}

#imageView { 
    padding: 1px;
    width: 700px;
    height: 550px;
}


#imageTemp {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 700px;
    height: 550px;
    /*     box-shadow: 1px 1px 6px black;*/
}

/*            #container {  }
            #imageView { border: 1px solid #000; }
            #imageTemp { position: absolute; top: 1px; left: 1px; }*/

div {
    display: block;
}


#header {
    box-shadow: 1px 1px 6px #555;
    height: 50px;
    font-size: 30px;
    margin-bottom: 20px;
    background-color:#89b3ee;
    color: white;
    text-align: center;
/*    border: 1px solid black;*/
    padding-right: 160px;
}

#header a{
    float:left; 

    height: 20px;
}


a.info{
    position:relative;
    z-index:24;
    color:#000;
    text-decoration:none;

    height: 20px;
    font-size: inherit;


    width: 80px;
    height: 80px;
    font-size: 20px;
    cursor: help;

}


a.info span{
    display: none
}

a.info:hover span{
    border-radius: 10px;
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    /*border:1px solid #000;
    */

    background-color:white;
    text-align: justify;
    padding:15px;
    box-shadow: 1px 1px 6px #555;
    border: 1px solid black;
}

.myButton {
    -moz-box-shadow:inset 0px -1px 0px -2px #bbdaf7;
    -webkit-box-shadow:inset 0px -1px 0px -2px #bbdaf7;
    box-shadow:inset 0px -1px 0px -2px #bbdaf7;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:3px 2px;
    text-decoration:none;
    text-shadow:2px 1px 0px #528ecc;
}.myButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    box-shadow: 1px 1px 6px #555;
    background-color:#378de5;
}.myButton:active {
    position:relative;
    top:1px;
}


.erase {
    -moz-box-shadow:inset 0px -1px 0px -2px #bbdaf7;
    -webkit-box-shadow:inset 0px -1px 0px -2px #bbdaf7;
    box-shadow:inset 0px -1px 0px -2px #bbdaf7;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:3px 2px;
    text-decoration:none;
    text-shadow:2px 1px 0px #528ecc;
}.erase:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;
    box-shadow: 1px 1px 6px #555;
}.erase:active {
    position:relative;
    top:1px;
}